<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
</head>
<body>

<!--
    v-for  : 实现数据列表的渲染  遍历数据
        1.  指令需要添加在需要循环的标签上
        2.  v-for=" username in usernames"   usernames  数组   =>  username  变量   =>{{username}}
        3.  v-for="(username, index)  in usernames"    index  是元素在数组中的索引  username  index  存入什么值和名字没有关系
        4.  v-for="(val , attr) in user"  遍历对象  val 中存入对象的属性值  attr 存入对象的属性名

       可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，
       其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名

     注:  1.为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key
         2.建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单
-->
<div id="app">
    <h2>{{ info }}</h2>
    <ul>
        <li v-for=" username in usernames">{{ username }}</li>
    </ul>
    <p>-------------------遍历数组-------------------------</p>
    <ul>
        <li v-for="(username, index)  in usernames" :key="index">{{ index }}:{{ username }}</li>
    </ul>
    <p>-------------遍历对象---------------</p>
    <ul>
        <li>username:{{ user.username }}</li>
        <li>password:{{ user.password }}</li>
        <li>age:{{ user.age }}</li>
        <li>sex:{{ user.sex }}</li>
    </ul>
    <p>------------- v-for 遍历对象---------------</p>
    <ul>
        <li  v-for="(val , attr) in user">{{ attr }}:{{ val }}</li>
    </ul>

    <p>------------- v-for 遍历数组 数组元素是对象---------------</p>

    <table border="1px" cellspacing="0" style="width: 80%;border: 1px solid red;">
        <tr>
            <th>用户名</th>
            <th>密码</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr v-for="usr in users">
            <td v-for="val in usr">{{ val }}</td>
        </tr>
        <tr></tr>
    </table>

</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            info: '数据列表渲染',
            usernames: ['tom', 'jack'],
            user: {
                username: 'tom',
                password: '123456',
                age: 20,
                sex: '男'
            },
            users: [
                {
                    username: 'tom1',
                    password: '1111111',
                    age: 20,
                    sex: '男'
                },
                {
                    username: 'tom2',
                    password: '2222222',
                    age: 20,
                    sex: '男'
                },
                {
                    username: 'tom3',
                    password: '3333333',
                    age: 20,
                    sex: '男'
                }
            ]
        },
        methods: {}
    })

</script>
</body>
</html>